<template>
  <div v-show="props.compType === 'numInput'">
    <MyTabs>
      <template #1>
        <el-form-item label="ID">
          <el-tooltip
            class="item"
            effect="dark"
            content="请注意,ID的修改可能会导致该组件相关事件失效！"
            placement="left"
          >
            <el-input v-model="props.id" class="input" />
          </el-tooltip>
        </el-form-item>
        <AssociatedFieldKey :props="props" />
        <el-form-item label="标题">
          <el-input v-model="props.label" />
        </el-form-item>
        <el-form-item label="提示符">
          <el-input v-model="props.placeholder" placeholder="请输入提示符" />
        </el-form-item>
        <el-form-item label="前缀">
          <el-input v-model="props.prepend" />
        </el-form-item>
        <el-form-item label="后缀">
          <el-input v-model="props.append" />
        </el-form-item>
        <el-form-item label="默认值">
          <el-input v-model.number="props.value" />
        </el-form-item>
        <el-form-item label="公式函数">
          <fn-Text
            v-model="props.fnText"
            :label="props.label"
            :def-value="props.fnText"
            @change="handlerChangeFn"
          />
        </el-form-item>
      </template>
      <template #2>
        <el-form-item label="栅格">
          <el-input-number v-model="props.span" :min="1" :max="24" />
        </el-form-item>

        <el-form-item label="栅格间隔">
          <el-input-number v-model="props.gutter" :min="0" />
        </el-form-item>
        <el-form-item label="标签宽度">
          <el-input-number v-model="props.labelWidth" :min="1" :max="200" />
        </el-form-item>
      </template>
      <template #3>
        <el-form-item label="显示标签">
          <el-switch v-model="props.showLabel" @change="handlerChangeLabel" />
        </el-form-item>
        <el-form-item label="必填">
          <el-switch v-model="props.required" />
        </el-form-item>

        <el-form-item label="禁用">
          <el-switch v-model="props.disabled" />
        </el-form-item>
        <el-form-item label="只读">
          <el-switch v-model="props.readonly" />
        </el-form-item>
      </template>
    </MyTabs>
  </div>
</template>
<script>
import MyTabs from "../../component/tabs";
import AssociatedFieldKey from "../../component/associatedFieldKey";
import FnText from "../../component/fnText";
/**
 * NumInput的配置项
 */
export default {
  name: "NumInputConfig",
  components: { MyTabs, AssociatedFieldKey, FnText },

  props: ["props", "getFormId"],
  data() {
    return {
      val: "",
      activeName: "first",
    };
  },
  watch: {},
  mounted() {},
  methods: {
    handlerChangeLabel(val) {
      this.props.labelWidth = val ? "80" : "1";
    },
    // 保存联动表单数组Id
    handlerChangeFn(fnArr, $fn) {
      this.props.fnArr = fnArr;
      this.props.$fn = $fn;
    },
  },
};
</script>
<style scoped></style>
